/* Allgemeine Stile */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* Slider-Container */
.slider {
    position: relative;
    width: 100%; /* 100% der Breite des Containers */
    height: 420px; /* Standardhöhe */
    overflow: hidden;
    margin: 0 auto; /* Zentriert den Slider */
    margin-bottom: 10px; /* Platz für die Dots */
}

/* Media Query für Bildschirme mit einer Breite von 828px oder weniger */
@media (max-width: 828px) {
    .slider {
        height: 200px; /* Höhe für kleinere Bildschirme */
    }

    .slide {
        min-width: 100%; /* Stellen Sie sicher, dass die Slides die volle Breite einnehmen */
    }
}

/* Slides-Container */
.slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

/* Einzelner Slide */
.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Stile für individuelle Slides */
#slide1 {
    background-size: 100%; /* Beispiel: Bild auf 80% der Größe skalieren */
    background-position: 50% 74%;
}

#slide2 {
    background-size: cover; /* Beispiel: Bild abdecken */
    background-position: center; /* Beispiel: Bild zentrieren */
}

#slide3 {
    background-size: cover; /* Beispiel: Bild abdecken */
    background-position: center; /* Beispiel: Bild zentrieren */
}

#slide4 {
    background-size: 100%; /* Beispiel: Bild auf 80% der Größe skalieren */
    background-position: 50% 45%;
}

#slide5 {
    background-size: cover; /* Beispiel: Bild abdecken */
    background-position: center; /* Beispiel: Bild zentrieren */
}

#slide6 {
    background-size: cover; /* Beispiel: Bild abdecken */
    background-position: center; /* Beispiel: Bild zentrieren */
}

#slide7 {
    background-position: 50% 45%; /* Beispiel: Bild an einer bestimmten Position platzieren */
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* Navigationspunkte (Dots) */
.navigation-dots {
    position: relative; /* Änderung: Relative Positionierung */
    bottom: 0; /* Dots werden unterhalb des Sliders platziert */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center; /* Zentriert die Dots horizontal */
    margin-top: 0px; /* Abstand zwischen Slider und Dots */
    z-index: 2;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: gray; /* Farbe der inaktiven Dots */
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #d81f1f; /* Farbe des aktiven Dots */
}

/* Änderung: Dots werden bei Mouseover rot */
.dot:hover {
    background-color: #d81f1f;
}

@media (max-width: 828px) {
    .slider {
        height: 200px; /* Höhe für kleinere Bildschirme */
    }

    .dot {
        width: 8px; /* Kleinere Dots */
        height: 8px;
        margin: 0 3px; /* Weniger Abstand zwischen den Dots */
    }
}